import { toggleSecondReviewDetail } from 'actions/annotation-actions';
import { Tag, Row, Col, Button } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { CombinedState } from 'reducers';

import { ExclamationCircleFilled } from '@ant-design/icons';
import useAnnotation from 'hooks/useAnnotation';
import classNames from 'classnames';

export default function secondReviewItemDetail(): JSX.Element {
    const dispatch = useDispatch();

    const jobAttributes = useSelector((state: CombinedState) => state.annotation.job.attributes);
    const { activatedData } = useSelector((state: CombinedState) => state.annotation.secondReview);
    const [origin = {}, firstReview = {}, secondReview = {}] = activatedData;
    const { clientID } = origin;
    const { differenceObj } = useAnnotation();

    // 初审diff
    const diff = differenceObj(origin, firstReview);
    const firstReviewClass = classNames({
        'text-base': true,
        'text-[#F53F3F]': diff === true,
    });

    // 复审diff
    const diffSecond = differenceObj(origin, secondReview);
    const secondReviewClass = classNames({
        'text-base': true,
        'text-[#F53F3F]': diffSecond === true,
    });

    const handleCancel = () => {
        dispatch(toggleSecondReviewDetail());
    };

    return (
        <div className='bg-white  rounded-md ' style={{ border: '1px solid #E9EAED' }}>
            <div className='bg-[#FFF7E8] px-3 py-9px mb-3 w-full'>
                <ExclamationCircleFilled className='text-[#FF7D00] mr-2' />
                <span>审核状态：{secondReview.approvalStatus === 1 ? '初审修改、复审待核' : '初审修改、复审已核'}</span>
            </div>
            <div className='p-3 space-y-3'>
                <div>
                    <div className='font-bold text-base mb-3 font-bold'>标注员</div>
                    <div>
                        <Tag color={origin.color}>{clientID}</Tag>
                        <span className='text-base'>{origin.label?.name}</span>
                    </div>
                    <div className='!bg-[#F7F8FA] p-3 mt-3 rounded space-y-3'>
                        {origin.label.attributes.map(
                            (attribute: any): JSX.Element => (
                                <Row
                                    key={attribute.id}
                                    align='middle'
                                    justify='start'
                                    className='cvat-object-item-attribute-wrapper '
                                    gutter={[16, 0]}
                                >
                                    <Col span={24}>
                                        <span className='text-[#86909C]'>{attribute.name}：</span>
                                        {origin.attributes[attribute.id]}
                                    </Col>
                                </Row>
                            ),
                        )}
                    </div>
                </div>
                <div>
                    <div className='font-bold text-base mb-3 font-bold'>初审员</div>
                    <div>
                        <Tag color={firstReview.color}>{clientID}</Tag>
                        <span className={firstReviewClass}>{firstReview.label?.name}</span>
                    </div>
                    <div className='!bg-[#F7F8FA] p-3 mt-3 rounded space-y-3'>
                        {jobAttributes[firstReview.label.id!].map(
                            (attribute: any): JSX.Element => (
                                <Row
                                    key={attribute.id}
                                    align='middle'
                                    justify='start'
                                    className='cvat-object-item-attribute-wrapper '
                                    gutter={[16, 0]}
                                >
                                    <Col span={24}>
                                        <span className='text-[#86909C]'>{attribute.name}：</span>
                                        <span
                                            className={
                                                Array.isArray(diff) && diff.includes(attribute.id.toString())
                                                    ? 'text-[#F53F3F]'
                                                    : ''
                                            }
                                        >
                                            {firstReview?.attributes?.[attribute.id]}
                                        </span>
                                    </Col>
                                </Row>
                            ),
                        )}
                    </div>
                </div>
                <div>
                    <div>
                        <div className='font-bold text-base mb-3 font-bold'>复审员</div>
                        <div>
                            <Tag color={secondReview.color}>{clientID}</Tag>
                            <span className={secondReviewClass}>{secondReview.label?.name}</span>
                        </div>
                        <div className='!bg-[#F7F8FA] p-3 mt-3 rounded space-y-3'>
                            {secondReview?.label?.attributes.map(
                                (attribute: any): JSX.Element => (
                                    <Row
                                        key={attribute.id}
                                        align='middle'
                                        justify='start'
                                        className='cvat-object-item-attribute-wrapper '
                                        gutter={[16, 0]}
                                    >
                                        <Col span={24}>
                                            <span className='text-[#86909C]'>{attribute.name}：</span>
                                            <span
                                                className={
                                                    Array.isArray(diffSecond) &&
                                                    diffSecond.includes(attribute.id.toString())
                                                        ? 'text-[#F53F3F]'
                                                        : ''
                                                }
                                            >
                                                {secondReview?.attributes?.[attribute.id]}
                                            </span>
                                        </Col>
                                    </Row>
                                ),
                            )}
                        </div>
                    </div>
                    <div className='mt-3 px-3 pb-3 flex justify-end gap-3'>
                        <Button type='primary' ghost onClick={handleCancel}>
                            关闭
                        </Button>
                    </div>
                </div>
            </div>
        </div>
    );
}
